<template>
	<div class="entertheshopstyle">
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="title">菜单设置</div>
					<vuedraggable :list="datas.list" item-key="index" :forceFallback="true" :animation="200">
						<template #item="{ element, index }">
							<section class="imgList">
								<van-icon class="el-icon-circle-close" name="close" @click="deleteimg(index)" />
								<el-form label-width="80px">
									<el-form-item label="左侧标题" :hide-required-asterisk="true" prop="shopName">
										<el-input v-model="element.title.text" placeholder="请输入左侧标题" maxlength="10" show-word-limit>
											<template #append>
												<el-color-picker v-model="element.title.color" />
											</template>
										</el-input>
									</el-form-item>

									<!-- 文案 -->
									<el-form-item label="右侧内容" :hide-required-asterisk="true" prop="copywriting">
										<el-input v-model="element.tip.text" placeholder="请输入右侧内容" maxlength="8" show-word-limit>
											<template #append>
												<el-color-picker v-model="element.tip.color" />
											</template>
										</el-input>
									</el-form-item>
									<el-form-item label="链接">
										<el-input v-model="element.url">
											<template #append> <el-button class="ml5 mr5" @click="openChoiceData(index)">选择</el-button> </template>
										</el-input>
									</el-form-item>

									<el-form-item label="左侧图标">
										<div class="sd-flex">
											<div class="imag" @click="changeIcon(index)">
												<el-image v-if="element.src != ''" :src="STATIC_URL + element.src" fit="contain" />
												<SvgIcon v-else name="ele-Plus"></SvgIcon>
												<div class="deleted" v-if="element.src != ''">
													<SvgIcon name="ele-Delete" @click.stop="clearIcon(index)"></SvgIcon>
												</div>
											</div>
											<div class="ml10 tip">建议尺寸：49*49</div>
										</div>
									</el-form-item>
								</el-form>
							</section>
						</template>
					</vuedraggable>
				</div>
				<div style="margin-top: 10px">
					<el-button :icon="Plus" @click="addMenu">添加</el-button>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts" name="entertheshopstyle">
import { defineAsyncComponent, ref } from 'vue';
import { Plus, Delete } from '@element-plus/icons-vue';
import vuedraggable from 'vuedraggable'; //拖拽组件
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
import { STATIC_URL } from '/@/utils/config';

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

const FileChoiceRef = ref();
const props = defineProps({
	datas: {},
});

const addMenu = () => {
	console.log('增加导航');
	props.datas.list.push({
		url: '',
		title: {
			color: '',
			text: '',
		},
		tip: {
			color: '',
			text: '',
		},
		src: '',
	});

	console.log('props: ', props.datas.list);
};

const index = ref();

const choiceFile = (res) => {
	console.log('res: ', res);
	props.datas.list[index.value].src = res[0].visitRelativePath;

	console.log('props.datas.list[index.value].icon ： ', props.datas.list[index.value].icon);
};

const deleteimg = (index) => {
	props.datas.list.splice(index, 1);
};

const changeIcon = (choiceIndex) => {
	index.value = choiceIndex;
	FileChoiceRef.value.openFileChoiceDialog();
};
const clearIcon = (index) => {
	console.log('删除');
	props.datas.list[index].src = '';
};

let choicePageIndex = 0;
const openChoiceData = (index) => {
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	props.datas.list[choicePageIndex].url = res.urlContent;
};
</script>

<style scoped lang="scss">
.entertheshopstyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;
}

.imgList:hover {
	.el-icon-circle-close {
		display: block;
	}
}
.imgList {
	padding: 6px 6px;
	margin: 16px 7px;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
	//display: flex;
	position: relative;

	/* 删除图标 */
	.el-icon-circle-close {
		position: absolute;
		right: -8px;
		top: -10px;
		cursor: pointer;
		font-size: 19px;
		z-index: 10000;
		display: none;
	}

	/* 图片 */
	.imag {
		width: 60px;
		height: 60px;
		border-radius: 5px;
		overflow: hidden;
		position: relative;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px dashed var(--el-border-color-darker);
		img {
			width: 100%;
			height: 100%;
			display: inline-block;
		}
		span {
			background: rgba(0, 0, 0, 0.5);
			font-size: 12px;
			position: absolute;
			left: 0px;
			bottom: 0px;
			display: inline-block;
			width: 100%;
			text-align: center;
			color: #fff;
			height: 20px;
			line-height: 20px;
		}

		.deleted {
			width: 100%;
			height: 20px;
			position: absolute;
			display: none;
			left: 0;
			bottom: 0;
			background-color: rgba(47, 54, 64, 0.6);
		}

		&:hover {
			.deleted {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	/* 图片字 */
	.imgText {
		width: 80%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 20px;
		justify-content: space-between;
		.select-type {
			display: flex;
			:deep(.el-select) {
				.el-input {
					input {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}
</style>
